<template>
  <div id="mall">
    <div class="mallsearch" @click="showsearch = true"><img src="../assets/images/mall-top-search.png"></div>
    <swiper class="mallswiper" auto :list="swiperlist" dots-position="center" :aspect-ratio="280/750" dots-class="activedots"></swiper>
    <div class="flexgrid">
      <div class="flexitem" @click="routeto('productlist', {type: 'all'})">
        <img slot="icon" src="../assets/images/mall-type-icon(5).png">
        <p slot="label" class="div-center">所有兑换</p>
      </div>
      <div class="flexitem" @click="routeto('productlist', {type: 'canbeinto'})">
        <img slot="icon" src="../assets/images/mall-type-icon(3).png">
        <p slot="label" class="div-center">可兑换</p>
      </div>
      <div class="flexitem" @click="routeto('productlist', {type: 'entity'})">
        <img slot="icon" src="../assets/images/mall-type-icon(4).png">
        <p slot="label" class="div-center">实物</p>
      </div>
      <div class="flexitem" @click="routeto('productlist', {type: 'coupon'})">
        <img slot="icon" src="../assets/images/mall-type-icon(1).png">
        <p slot="label" class="div-center">优惠券</p>
      </div>
    </div>
    <div class="hotlist">
      <div class="hottitle">—— 热门兑换 ——</div>
      <div class="hotol">
        <div class="hotli" v-for="(item, index) in hotlist" :key="index" @click="routeto('productdetail', {id: item.id})">
          <div class="imgarea">
            <img :src="item.img">
          </div>
          <p class="hotlititle">{{item.title}}</p>
          <div class="hotliprice"><span>{{item.price}}</span>积分<a href="javascript:;" @click.stop="toBuy(index)">兑换</a></div>
        </div>
      </div>
    </div>
    <div class="fixedbar">
      <div class="item cookiecar" @click="routeto('orderbuycar')">
        <img src="../assets/images/buycar(1).png"><br>
        <span>购物车</span>
      </div>
      <div class="item cookiecar" @click="routeto('points')">
        <p>{{pointsinfo.lastpoints}}</p>
        <span>我的积分</span>
      </div>
      <div class="item cookiecar" @click="routeto('orderlist')">
        兑换记录
      </div>
    </div>
    <SearchList v-show="showsearch"></SearchList>
  </div>
</template>

<script>
import Swiper from 'vux/src/components/swiper/swiper.vue'
import SearchList from '@/pages/SearchList'
export default{
  name: 'mall',
  components: {
    Swiper,
    SearchList
  },
  data () {
    return {
      swiperlist: [],
      hotlist: [],
      pointsinfo: {},
      showsearch: false
    }
  },
  created () {
    this.$axios.post(this.apidomain + '/api/member/getIsActivateMemberCard/' + this.getCookie('appid'), {
      openId: this.getCookie('openid')
    })
    .then((response) => {
      if (response.data.data !== '1') {
        this.routeto('wechatticket')
      }
    })
    this.$axios.post(this.apidomain + '/api/integralMall/hotProductInfo/' + this.getCookie('appid'), {
      num: 4
    })
    .then((response) => {
      this.hotlist = response.data.data
    })
    // get swiper list
    this.$axios.post(this.apidomain + '/api/integralMall/queryBannerInfo/' + this.getCookie('appid'), {})
    .then((response) => {
      this.swiperlist = response.data.data
    })
    // 拉取积分数据
    this.$axios.post(this.apidomain + '/api/integralMall/getIntegralSum/' + this.getCookie('appid'), {
      openId: this.getCookie('openid')
    })
    .then((response) => {
      this.pointsinfo = response.data.data
    })
    .catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    toBuy: function (index) {
      console.log(this.hotlist)
      let buyinfo = this.hotlist[index]
      if (buyinfo.type === '1') {
        if (confirm('本次兑换将消耗' + 1 * buyinfo.price + '积分，兑换成功后可至兑换记录页面查看，确认兑换吗？')) {
          let sdata = [{
            'id': buyinfo.id,
            'num': 1,
            'weight': ''
          }]
          this.$axios.post(this.apidomain + '/api/integralMall/saveConfirmOrder/' + this.getCookie('appid'), {
            data: sdata,
            openId: this.getCookie('openid'),
            name: '',
            phone: '',
            address: '',
            province: '',
            city: '',
            district: ''
          })
          .then((response) => {
            if (response.data.errorCode === '0') {
              this.routeto('orderdetail', {id: response.data.data.id})
            } else {
              window.alert(response.data.errorMsg)
            }
          })
          this.showalert = true
        }
      } else {
        this.routeto('productdetail', {id: buyinfo.id})
      }
    }
  }
}
</script>
<style lang="less">
@import '../assets/less/product/mall.less';
</style>
